<template>
	<view class="mine">
		<view class="box_bg" :style="'background: url('+ c_imgPath + 'mine/indexBg.png'+ ') repeat-y 0 0 / 100% auto;'">

		</view>
		<view class="header">
			<view class="status_bar"></view>
			<!-- <view class="header_title">  </view> -->
			<view class="mineInfo">
				<view class="head_name">
					<view class="flex_center">
						<view class="jp_headimg">
							<image :src="userinfo.headimg" class="headimg" v-if="userinfo.headimg"
								@click="gotoPage('/pages/user/change')"></image>
							<!-- <image :src="z_imgPath+'headimg.png'" class="headimg" v-else> </image> -->
						</view>

						<view class="hang1" @click="gotoPage('/pages/user/change')"
							style="width: 280rpx;margin-left: 45rpx;padding-top: 20rpx;">
							<view class="phone_z hang1" v-if="userinfo.nickname">{{userinfo.nickname}}</view>
							<view class="phone_z" v-else @click="login_z">未登录</view>
							<view class="id_z flex_center">{{userinfo.ID?'ID:'+userinfo.ID:'登录领取新人专享福利'}}
								<!-- <image :src="userinfo.vip_imgurl" v-if="userinfo.vip_imgurl" mode="heightFix"
									@click="gotoPage('/pages/user/vip')"></image> -->
								<view class="vip_box" v-if="userinfo.vip">
									<view class="vip_box_text">LV.{{userinfo.vip}}</view>
									<view class="vip_box_img">
										<image :src="c_imgPath + 'mine/vipLogo.png'"></image>
									</view>
								</view>
							</view>
							<!-- <view class="id_z" v-if="userinfo.mobile_is==1">{{userinfo.mobile}}</view> -->
						</view>
					</view>
					<view v-if="userinfo.mobile_is!==1" class="animated pulse infinite"
						style="position: absolute;top: 40rpx;right: 176rpx;font-size: 24rpx;color: #ffffff;text-align: center;">
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
							<image :src=" c_imgPath + 'mine/bangding.png' " style="width: 48rpx;height: 48rpx;"></image>
						</button>
						<view style="margin-top: 6rpx;">绑定</view>
					</view>
					<view @click="gotoPage('/pages/user/vip')"
						style="position: absolute;top: 40rpx;right: 105rpx;font-size: 24rpx;">
						<image :src="c_imgPath+'mine/huiyuan.png'" style="width: 48rpx;height: 48rpx;"></image>
						<view>会员</view>
					</view>
					<view class="pulse infinite"
						style="position: absolute;top: 40rpx;right: 39rpx;font-size: 24rpx;color: #ffffff;text-align: center;">
						<button open-type="contact">
							<image :src="c_imgPath+'mine/kefu.png'" style="width: 48rpx;height: 48rpx;"></image>
						</button>
						<view style="margin-top: 6rpx;">客服</view>
					</view>
				</view>
				<!-- 积分 -->
				<view class="youhui"
					:style="'background: url('+ c_imgPath + 'mine/yhBg.png'+ ') repeat-y 0 0 / 100% 100%;'">
					<view @click="gotoPage('/pages/user/bi_jl')">
						<view>赏币</view>
						<view><text>{{userinfo.integral}}</text></view>
					</view>
					<view @click="gotoPage('/pages/user/jf_jl')">
						<view>积分</view>
						<view><text>{{userinfo.score}}</text></view>
					</view>
					<view @click="gotoPage('/pages/user/my_coupon')">
						<view>欧气券</view>
						<view><text>{{userinfo.coupon}}</text></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 余额提现 -->
		<view class="tixian" :style="'background: url('+ c_imgPath + 'mine/moneyBg.png'+ ') repeat-y 0 0 / 100% 100%;'"
			v-if="userinfo.is_show == 1">
			<view class="tixian_l">
				<view>余额（元）</view>
				<view style="margin-top: 20rpx;display: flex;align-items: baseline;">
					<text style="color: #fff;">￥</text>
					<text style="font-size: 40rpx;color: #B07CDD;">{{userinfo.money}}</text>
					<view class="flex_center"><text style="font-size: 24rpx;margin-left: 20rpx;color: #999999;"
							@click="gotoPage('/pages/user/yetx')">查看明细</text>
						<image :src="z_imgPath + 'mine/point_r.png'"></image>
					</view>

				</view>
			</view>
			<view class="tixian_r">
				<!-- <view @click="gotoPage('/pages/user/withdraw/withdraw')">
					<image :src="c_imgPath + 'mine/txBtn.jpg'"></image>
				</view> -->
				<view @click="$refs.chongzhi_show.open()">
					<image :src="c_imgPath + 'mine/czBtn.jpg'"></image>
				</view>
			</view>
		</view>
		<!-- 邀请好友 -->
		<view class="invite" @click="gotoPage('/pages/user/tui-guang')">
			<image :src="c_imgPath+'mine/invite_img.png'"></image>
		</view>
		<!-- 盒柜 -->
		<!-- <view class="hegui" @click="gotoPage('/pages/sangdai/sangdai')">
			<view>
				<image :src="z_imgPath + 'mine/hegui.png'"></image>
				<view>我的盒柜</view>
			</view>
			<image :src="z_imgPath + 'mine/point_r.png'"></image>
		</view> -->

		<!-- 记录列表 -->
		<view class="list" :style="'background: url('+ c_imgPath + 'mine/mentBg.png'+ ') repeat-y 0 0 / 100% auto;'">
			<view @click="gotoPage('/pages/user/coupon')">
				<view>
					<image :src="c_imgPath + 'mine/yhq.png'"></image>
					<view>优惠券</view>
				</view>
				<image :src="z_imgPath + 'mine/point_r.png'"></image>
			</view>
			<view @click="gotoPage('/pages/user/my_kace')">
				<view>
					<image :src="c_imgPath + 'mine/wdkc.png'"></image>
					<view>我的卡册</view>
				</view>
				<image :src="z_imgPath + 'mine/point_r.png'"></image>
			</view>
			<view @click="gotoPage('/pages/user/xfjl')">
				<view>
					<image :src="c_imgPath + 'mine/xfjl.png'"></image>
					<view>消费记录</view>
				</view>
				<image :src="z_imgPath + 'mine/point_r.png'"></image>
			</view>
			<view @click="gotoPage('/pages/user/hsjl')">
				<view>
					<image :src="c_imgPath + 'mine/dbjl.png'"></image>
					<view>打包记录</view>
				</view>
				<image :src="z_imgPath + 'mine/point_r.png'"></image>
			</view>
			<view @click="gotoPage('/pages/user/fhjl')">
				<view>
					<image :src="c_imgPath + 'mine/fhjl.png'"></image>
					<view>发货记录</view>
				</view>
				<image :src="z_imgPath + 'mine/point_r.png'"></image>
			</view>
			<!-- <view @click="gotoPage('/pages/user/tui-guang')">
				<view>
					<image :src="z_imgPath + 'mine/yqhy.png'"></image>
					<view>邀请好友</view>
				</view>
				<view class="flex_center">
					立即邀请 <image :src="z_imgPath + 'mine/point_r.png'" style="margin-right: 0;"></image>
				</view>
			</view> -->
			<view @click="$refs.qunliao_show.open()">
				<view>
					<image :src="z_imgPath + 'mine/jrql.png'"></image>
					<view>加入福利活动互助分享群</view>
				</view>
				<view class="flex_center">
					<!-- <image :src="z_imgPath + 'mine/fuli_ewm.png'" style="width:50rpx;height:50rpx"></image> -->
					<image :src="z_imgPath + 'mine/point_r.png'" style="margin-right: 0;"></image>
				</view>
			</view>
			<view style="border: none;" @click="gotoPage('/pages/guize/guize?type=2')">
				<view>
					<image :src="c_imgPath + 'mine/yhxy.png'"></image>
					<view>用户协议</view>
				</view>
				<image :src="z_imgPath + 'mine/point_r.png'" style="margin-right: 0;"></image>
			</view>
			<!-- <view @click="clearStorage">
				<view>
					<image :src="c_imgPath + 'mine/fhjl.png'"></image>
					<view>清除缓存</view>
				</view>
				<image :src="z_imgPath + 'mine/point_r.png'"></image>
			</view> -->
		</view>
		<!-- 我的收藏 -->
		<view class="sc_title"></view>
		<view class="qiehuan">
			<view @click="getlist(i+1)" v-for="(v,i) in list" :key="i">
				<!-- <image :src="show==i+1?z_imgPath+v.sel:z_imgPath+v.img"></image> -->
				<view class="qiehuan_item" :class="show==i+1?'xzs':'wzs'"
					:style="show == i+1?'background: url('+ c_imgPath + 'mine/qiehuan_sel.png'+ ') repeat-y 0 0 / 100% 100%;':'background: url('+ c_imgPath + 'mine/qiehuan.png'+ ') repeat-y 0 0 / 100% 100%;'">
					<text>{{v.name}}</text>
				</view>
				<!-- <view class="qiehuan_line" v-if="show==i">
					<image src="../../static/shouye/top.png"></image>
				</view> -->
			</view>
		</view>
		<!-- 我的收藏 -->
		<view class="tuijian">
			<view class="shop_coucent">
				<view v-for="(item,index) in mycollectArr" :key="index" @click="todetail(item)" class="shop_item">
					<image :src="item.imgurl"></image>
					<view class="shop_text">
						<view class="hang1">{{item.goods_title}}</view>
						<view class="flex_center" style="justify-content: space-between;font-size: 20rpx;"
							v-if="show==1">
							<view style="color:#B07CDD">第{{item.num}}箱</view>
							<view style="color:rgba(255, 255, 255, .4)">{{item.surplus_stock}}/{{item.stock}}</view>
						</view>
					</view>
					<image :src="c_imgPath + 'mine/sc_close.png'" class="p_t_r" @click.stop="del_soucang(item.id)">
					</image>
				</view>
			</view>
		</view>
		<!-- 群聊弹窗 -->
		<uni-popup ref="qunliao_show" type="center">
			<view class="pop"
				:style="'background: url('+ c_imgPath+'shouye/qunliao_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
				<image :src="ewm"></image>
				<image :src="z_imgPath + 'mine/close.png'" class="qunliao_close" @click="$refs.qunliao_show.close()">
				</image>
			</view>
		</uni-popup>
		<!-- 余额充值弹窗 -->
		<uni-popup ref="chongzhi_show" type="bottom">
			<view class="order animated fadeInUp">
				<view class="order_title"
					:style="'background: url('+ c_imgPath + 'mine/title_bg.png'+ ') repeat-y 0 0 / 100% 100%;'">
					<view class="order_title_text">余额充值</view>
					<view class="ca" @click="$refs.chongzhi_show.close()">×</view>
				</view>
				<view class="pop_coucent">
					<view>选择充值金额</view>
					<view class="pop_box">
						<view @click="money_1=v" v-for="(v,i) in moneyArr" :key='i'
							:style="money_1 == v?'background: url('+ c_imgPath + 'mine/cz_item_sel.png'+ ') no-repeat 0 0 / 100% 100%;':'background: url('+ c_imgPath + 'mine/cz_item.png'+ ') no-repeat 0 0 / 100% 100%;'">
							￥<text style="font-size: 32rpx;">{{v}}</text></view>
					</view>
				</view>
				<view class="pop_coucent">
					<view>输入充值金额</view>
					<input type="text" placeholder="请输入金额，最低1元" v-model="money_1" placeholder-style="color:#999999" />
				</view>
				<!-- <image :src="z_imgPath+'mine/chongzhi_btn.png'" class="pop_chongzhi" @click="chongzhi_click"></image> -->
				<view class="pop_btn" @click="chongzhi_click"
					:style="'background: url('+ c_imgPath + 'mine/btnBg.png'+ ') repeat-y 0 0 / 100% 100%;'">
					<text>确认充值</text>
				</view>
				<view style="height:env(safe-area-inset-bottom);"></view>
			</view>
		</uni-popup>
		<!-- 自定义底部 -->
		<!-- <tabbar :type="4"></tabbar> -->
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				z_imgPath: this.$z_img,
				c_imgPath: 'https://qt.yhemall.com/',
				u_imgPath: '/static/',
				userinfo: {},
				moneyArr: [100, 200, 500, 1000, 3000],
				// 余额充值金额
				money_1: '',
				// 二维码
				ewm: '',
				// 1:微信提现 2:支付宝提现
				tixian_index: 1,
				// 收藏数组
				mycollectArr: [],
				// 分享券id
				coupon_id: '',
				list: [{
					name: '一番赏收藏'
				}, {
					name: '无限赏收藏'
				}],
				show: 1,
			}
		},
		onLoad(e) {
			// console.log(e)
			if (e && e.coupon_id) {
				this.coupon_id = e.coupon_id
			}
			if (e.pid) {
				uni.setStorageSync('pid', e.pid)
			}
		},
		onHide() {
			uni.setStorageSync('page', this.$mp.page.route)
		},
		// onShareAppMessage() {
		// 	return {
		// 		title: "快来加入乐掏~",
		// 		imageUrl: "",
		// 		path: "/pages/user/index?pid=" + uni.getStorageSync('userinfo').ID
		// 	};
		// },
		onShow(e) {
			this.getdata()
			this.getmycollect()
			let that = this;
			if (that.coupon_id && uni.getStorageSync('token')) {
				uni.showModal({
					content: '请确认领取欧气券',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#999999 ',
					cancelColor: '#FD4A0D ',
					success(res) {
						if (res.confirm) {
							that.req({
								url: 'coupon_share',
								data: {
									coupon_id: that.coupon_id
								},
								success(res) {
									if (res.status == 1) {
										uni.showToast({
											title: '领取成功~',
											icon: 'success',
											duration: 2000,
											success() {
												setTimeout(() => {
													uni.redirectTo({
														url: 'my_coupon?show=2'
													})
												}, 2000)
											}
										})
									} else if (res.status == 0) {
										uni.redirectTo({
											url: 'index'
										})
										console.log('用户点击确定');
									}
								}
							})
						} else if (res.cancel) {
							uni.redirectTo({
								url: 'index'
							})

						}
					}
				})
			}
		},

		methods: {
			//清除缓存
			clearStorage() {
				uni.clearStorageSync();
				uni.showToast({
					title: '清除成功'
				})
			},
			//邀请好友提前请求

			tokefu() {
				// #ifdef  MP-WEIXIN  
				wx.openCustomerServiceChat({
					extInfo: {
						url: uni.getStorageSync('wx_link') //客服地址链接
					},
					corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
				// #endif
			},
			getPhoneNumber(e) {
				// console.log(e)
				let that = this;
				uni.login({
					success(res) {
						// console.log(res)
						uni.checkSession({
							success() {
								that.req({
									url: 'login_bind_mobile',
									data: {
										code: e.detail.code,
										encryptedData: e.detail.encryptedData,
										iv: e.detail.iv,
									},
									success(res) {
										if (res.status == 1) {
											uni.showToast({
												title: '绑定成功~',
												success() {
													that.getdata()
												}
											})
										}
									}
								})
							}
						})
					}
				})
			},

			getlist(index) {
				this.show = index;
				this.mycollectArr = []
				this.getmycollect()
			},
			todetail(a) {
				if (a.type == 2) {
					uni.navigateTo({
						url: '/pages/shouye/detail_wuxian?goods_id=' + a.goods_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/shouye/detail?goods_id=' + a.goods_id + '&goods_num=' + a.num
					})
				}

			},

			del_soucang(a) {
				let that = this;
				that.req({
					url: 'delCollect',
					data: {
						id: a,
					},
					success(res) {
						if (res.status == 1) {
							that.getmycollect()
						}
					}
				})
			},
			chongzhi_click() {
				let that = this;
				that.req({
					url: 'recharge',
					data: {
						money: that.money_1
					},
					success(res) {
						if (res.status == 1) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: 'MD5',
								paySign: res.data.paySign,
								complete(res) {
									if (res.errMsg == 'requestPayment:fail cancel') {
										uni.showToast({
											title: '取消支付',
											icon: 'loading',
											duration: 1000
										})
									}
									if (res.errMsg == 'requestPayment:ok') {
										that.$refs.chongzhi_show.close()
										that.getdata()
									}
								},
							})

						}

					}
				})
			},
			getdata() {
				let that = this;
				that.req({
					url: 'user',
					success(res) {
						if (res.status == 1) {
							that.ewm = res.data.other.erweima
							that.moneyArr = res.data.other.recharge
							that.userinfo = res.data.userinfo;
							uni.setStorageSync('userinfo', that.userinfo)
							uni.setStorageSync('jump_appid', res.data.other.jump_appid)
							uni.setStorageSync('wx_link', res.data.other.wx_link)
							uni.setStorageSync('corpid', res.data.other.corpid)
						}
					}
				})
			},
			getmycollect() {
				let that = this;
				that.req({
					url: 'listCollect',
					Loading: true,
					data: {
						type: that.show
					},
					success(res) {
						if (res.status == 1) {
							that.mycollectArr = res.data.data
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.mineInfo {
		width: 690rpx;
		height: 330rpx;
		/* background: url(https://xiongmaomh.languoyun.cn/newindex/mineTop.png) no-repeat; */
		background-size: 100% 100%;
	}

	page {
		background: #000000;
	}

	.qiehuan {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
	}

	.qiehuan_item {
		width: 238rpx;
		height: 64rpx;
		margin: auto;
		text-align: center;
		line-height: 64rpx;
		font-size: 28rpx;
		font-family: SourceHanSansSC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.qiehuan_line {
		margin: -10rpx auto;
		width: 30rpx;
		height: 20rpx;
		border-bottom: 2rpx solid #FF0000;
		border-radius: 2rpx;
	}

	.qiehuan image {
		width: 240rpx;
		height: 68rpx;
	}

	.qiehuan>view {
		flex: 1;
		text-align: center;
	}

	.wzs {}

	.xzs {
		text {
			background: linear-gradient(180deg, #B55AFF 0%, #E5C7FF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 48rpx;
		height: 48rpx;
	}

	.name_phone>input {
		font-size: 28rpx;
		margin-left: 40rpx;
	}

	.name_phone {
		padding: 20rpx 0;
		box-sizing: border-box;
		border-bottom: 1px solid #EEEEEE;
	}

	.pop_tixian_input {
		margin: 20rpx 0;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		border-bottom: 1px solid #EEEEEE;
	}



	.pop_head>view {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.pop_head {
		display: flex;
		justify-content: space-between;
	}


	.pop_box>view {
		width: 164rpx;
		height: 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		margin-top: 30rpx;
		margin-right: 20rpx;
	}

	.pop_box {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.pop_btn {
		width: 690rpx;
		height: 78rpx;
		line-height: 78rpx;
		margin: auto;
		text-align: center;
		margin-top: 34rpx;

		text {
			background: linear-gradient(0deg, #B75AFF 0%, #FFFFFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.pop_coucent>input {
		width: 630rpx;
		height: 88rpx;
		background: #393939;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 10rpx;
		padding-left: 40rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		margin-top: 30rpx;

	}

	.pop_coucent {
		width: 690rpx;
		margin: auto;
		border: 1px solid rgba(255, 255, 255, 0.5);
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.pop_chongzhi {
		width: 415rpx;
		height: 85rpx;
		margin: 48rpx auto 0;
		display: block;
	}

	.ca {
		font-size: 56rpx;
		position: absolute;
		top: 0;
		right: 20rpx;
	}

	.order_title {
		font-size: 32rpx;
		height: 89rpx;
		color: #FFFFFF;
		position: relative;
		font-weight: normal;
		line-height: 89rpx;

		.order_title_text {
			padding-top: 20rpx;
			text-align: center;
			background: linear-gradient(0deg, #B18DD6 0%, #FFFFFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
		}
	}

	.order {
		width: 750rpx;
		background: #09081C;
		box-sizing: border-box;
		border-top: 1px solid rgba(255, 255, 255, 0.5);
		position: absolute;
		/* #ifdef MP */
		bottom: 0;
		/* #endif */
		/* #ifndef MP */
		bottom: 120rpx;
		/* #endif */
	}

	.qunliao_close {
		width: 70rpx;
		height: 70rpx;
		margin: 116rpx auto;
		display: block;
		/* position: absolute; */
	}

	.pop>image:nth-of-type(1) {
		width: 399rpx;
		height: 399rpx;
		margin: 258rpx auto 0;
		display: block;
	}

	.pop {
		width: 640rpx;
		height: 743rpx;
		padding-top: 1rpx;
		position: relative;
	}

	.mengban {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.45);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.p_t_r {
		position: absolute;
		top: -20rpx;
		right: -10rpx;
		width: 32rpx !important;
		height: 32rpx !important;
	}

	.shop_item>image {
		width: 216rpx;
		height: 216rpx;
		border-radius: 8rpx 8rpx 0 0;
		margin: 13rpx auto;
		display: block;
	}

	.shop_text>.hang1 {
		margin-bottom: 10rpx;
	}

	.shop_text {
		padding: 2rpx 23rpx;
		box-sizing: border-box;
	}

	.shop_item {
		width: 242rpx;
		height: 343rpx;
		/* border-radius: 10rpx; */
		margin-top: 10rpx;
		position: relative;
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.shop_coucent>view:nth-child(3n-1) {
		margin: 10rpx 0rpx 0;
	}

	.shop_coucent {
		display: flex;
		flex-wrap: wrap;
		font-size: 24rpx;
	}

	.sc_title {
		width: 686rpx;
		height: 22rpx;
		margin: 0 auto;
	}

	.tuijian {
		width: 750rpx;
		padding: 0 13rpx 100rpx 13rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
	}

	.list>view>view>image {
		margin-right: 20rpx;
	}

	.list image {
		width: 40rpx;
		height: 40rpx;
	}

	.list>view>view>image:nth-of-type(1) {
		width: 48rpx;
		height: 48rpx;
	}

	.list>view>view {
		display: flex;
		align-items: center;
	}

	.list>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border-bottom: 1px solid #EEEEEE; */
		padding: 24rpx 0;
	}

	.list {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx auto;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		background: #333333;
		border-radius: 10rpx;
		color: #FFFFFF;
	}

	.hegui image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.hegui>image {
		width: 40rpx;
		height: 40rpx;
		margin: 0;
	}

	.hegui>view {
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.hegui {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 99rpx;
		background: #333333;
		border-radius: 10rpx;
		margin: 30rpx auto;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.invite {
		text-align: center;
		margin-top: 20rpx;

		image {
			width: 690rpx;
			height: 150rpx;
		}
	}

	.tixian_r>view:nth-child(1) {
		// width: 110rpx;
		// height: 48rpx;
		// background: #B07CDD;
		border-radius: 24rpx;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
		margin-bottom: 10rpx;

	}

	.tixian_r>view:nth-child(1) {
		width: 132rpx;
		height: 48rpx;
		// border: 1px solid #B07CDD;
		color: #FFFFFF;
		border-radius: 24rpx;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		font-size: 28rpx;
		/* text-shadow: 0px 0px 14rpx rgba(237, 87, 255, 0.7);
		font-family: 'zcq'; */
	}

	.tixian_r {
		image {
			width: 100rpx;
			height: 44rpx;
		}
	}

	.tixian_l image {
		width: 40rpx;
		height: 40rpx;
	}

	.tixian_l {
		font-size: 28rpx;
	}

	.tixian {
		width: 690rpx;
		height: 169rpx;
		margin: 30rpx auto 0;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #333333;
		border-radius: 10rpx;
		color: #FFFFFF;
	}

	.youhui text {
		margin-right: 10rpx;
		font-size: 36rpx;
		/* font-family: 'zcq'; */
	}

	.youhui>view>view:nth-of-type(2) {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.youhui>view:nth-of-type(1)::after,
	.youhui>view:nth-of-type(2)::after {
		content: '';
		width: 2rpx;
		height: 40rpx;
		/* background: #FFFFFF; */
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.youhui>view {
		font-size: 24rpx;
		text-align: center;
		position: relative;
		flex: 1;
	}

	.youhui {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 686rpx;
		height: 169rpx;
		/* background: #11141D; */
		/* 	border: 1rpx solid #666666;
		border-radius: 10rpx;
		box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); */
		margin: 30rpx auto 0;
		color: #FFFFFF;
	}

	.vip_box {
		background: linear-gradient(90deg, #D8D2FF 0%, #7C37DB 100%);
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		width: 120rpx;
		margin-left: 20rpx;

		.vip_box_text {
			flex: 1;
			text-align: center;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.vip_box_img {
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.id_z>image {
		width: 120rpx;
		height: 36rpx;
		margin-left: 20rpx;
	}

	.id_z {
		font-size: 24rpx;
		margin-top: 10rpx;
		color: #999999;
	}

	.phone_z {
		font-size: 32rpx;
		/* font-weight: bold; */
	}

	.headimg {
		width: 105rpx;
		height: 105rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.jp_headimg>image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		/* 	clip-path: polygon(50% 10%, 85% 30%, 85% 70%, 50% 92%, 17% 71%, 16% 30%); */
		/* polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0) */
	}

	.jp_headimg {
		width: 80rpx;
		height: 80rpx;
		margin: 25rpx 0 0 12rpx;
	}


	.head_name {
		display: flex;
		justify-content: space-between;
		position: relative;
		/* text-shadow: rgba(150, 255, 254, 0.7) 0px 0px 10rpx; */
	}

	.header_title {
		font-size: 40rpx;
		font-family: iFontszhounianti;
		font-weight: bold;
		font-style: oblique;
		color: #FFFFFF;
	}

	.header {
		width: 750rpx;
		color: #FFFFFF;
		position: relative;
		padding: 0rpx 30rpx;
		box-sizing: border-box;

		padding-top: calc(var(--status-bar-height) + 80rpx);
	}

	.mine {
		width: 100vw;
		/* height: 100vh; */
		position: relative;
		padding-bottom: 50rpx;
		min-height: 100vh;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		font-size: 40rpx;
		font-family: iFontszhounianti;
		font-weight: bold;
		font-style: oblique;
		color: #FFFFFF;
		margin-bottom: 10rpx;
	}
</style>